<template>
	<view class="service-detail">
		<!-- 导航栏 -->
		<nav-bar></nav-bar>
		<!-- 项目图片 -->
		<view class="service-banner">
			<swiper class="banner-swiper" circular indicator-dots autoplay interval="3000" duration="500">
				<swiper-item v-for="(image, index) in imageList" :key="index">
					<image class="banner-image" :src="image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 服务基本信息 -->
		<view class="service-info">
			<text class="name">{{ serviceInfo.name}}</text>
			<view class="features">
				<view class="duration">
					<text class="duration-icon">⏱</text>
					<text>{{ serviceInfo.duration }}分钟</text>
				</view>
			</view>
			<view class="tags">
				<text class="tag" v-for="(tag, index) in serviceInfo.tags" :key="index">{{ tag }}</text>
			</view>
		</view>
		
		<!-- 技师信息，仅当从技师详情页进入时显示 -->
		<view class="tech-info" v-if="fromTechDetail">
			<view class="section-title">服务技师</view>
			<view class="tech-card">
				<image class="avatar" :src="techInfo.avatar" mode="aspectFill"></image>
				<view class="info">
					<view class="name-row">
						<text class="name">{{ techInfo.name }}</text>
						<text class="title">{{ techInfo.title }}</text>
					</view>
					<view class="rating">
						<text class="score">{{ techInfo.score }}分</text>
						<text class="orders">已服务{{ techInfo.orders }}人</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 服务介绍 -->
		<view class="service-intro">
			<view class="section-title">项目简介</view>
			<text class="brief">{{ serviceInfo.introduction}}</text>
		</view>
		
		<!-- 底部预约按钮区域 -->
		<view class="booking-buttons">
			<view class="btn store-service" @click="handleStoreService">
				<view class="btn-inner">门店预约</view>
			</view>
			<view class="btn home-service" @click="handleHomeService" v-if="serviceId != 16">
				<view class="btn-inner">上门服务</view>
			</view>
		</view>
	</view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
	data() {
		return {
			serviceId: '',
			techId: '',
			storeId: '',
			fromTechDetail: false,
			serviceInfo: {
				id: '',
				name: '',
				price: 0,
				duration: 0,
				introduction: ''
			},
			techInfo: {
				id: '',
				name: '',
				avatar: '',
				title: '',
				score: 0,
				orders: 0,
				storeId: ''
			},
			imageList: []
		}
	},
	
	onLoad(options) {
		console.log('Received options:', options)
		
		// 设置服务ID
		this.serviceId = options.id || options.serviceId || '1'
		
		// 只有从技师详情页进入时才设置技师和门店信息
		if (options.fromTechDetail === 'true') {
			this.techId = options.techId
			this.storeId = options.storeId
			this.fromTechDetail = true
			this.loadTechInfo()
		}
		
		// 加载服务信息
		this.loadServiceInfo()
		
		// 添加足迹
		this.addFootprint()
	},
	
	methods: {
		// 添加足迹记录
		async addFootprint() {
			try {
				const userInfoStr = uni.getStorageSync('userInfo')
				let userInfo = null
				
				if (userInfoStr) {
				  try {
				    // 如果是字符串，尝试解析
				    if (typeof userInfoStr === 'string') {
				      const parsed = JSON.parse(userInfoStr)
				      // 检查是否是登录响应格式
				      if (parsed.code === 200 && parsed.data) {
				        userInfo = parsed.data
				      } else {
				        userInfo = parsed
				      }
				    } else {
				      // 如果不是字符串，直接使用
				      userInfo = userInfoStr
				    }
				  } catch (e) {
				    console.error('解析用户信息失败', e)
				    // 解析失败时，尝试直接使用
				    userInfo = userInfoStr
				  }
				}

				const res = await uni.request({
					url: `${uni.$config.baseUrl}/footprint/add`,
					method: 'POST',
					data: {
						memberId: userInfo.memberId,
						projectId: this.serviceId,
						projectName: this.serviceInfo.name,
						projectDesc: this.serviceInfo.introduction,
						projectImage: this.serviceInfo.image,
						visitTime: new Date().getTime()
					}
				})

				if (res.statusCode !== 200 || res.data.code !== 200) {
					console.error('添加足迹失败:', res.data.msg)
				}
			} catch (error) {
				console.error('添加足迹失败:', error)
			}
		},
		
		// 加载服务信息
		async loadServiceInfo() {
			try {
				const res = await uni.request({
					url: `${uni.$config.baseUrl}/project/project/${this.serviceId}`,
					method: 'GET'
				})
				
				if (res.statusCode === 200 && res.data.code === 200) {
					const data = res.data.data
					console.log(res)
					this.serviceInfo = {
						id: data.id,
						name: data.projectName,
						price: data.price,
						duration: data.duration,
						introduction: data.projectDesp,
						image: data.imgUrls ? data.imgUrls.split(',') : null,
						features: data.features || [],
						tags: data.projectTags.split(',') || []
					}
					
					// 处理图片数组
					if (this.serviceInfo.image) {
						// 如果image是字符串，尝试解析为数组
						if (typeof this.serviceInfo.image === 'string') {
							try {
								// 尝试解析JSON字符串
								const parsedImage = JSON.parse(this.serviceInfo.image)
								this.imageList = Array.isArray(parsedImage) ? parsedImage : [this.serviceInfo.image]
							} catch (e) {
								// 如果不是JSON，可能是逗号分隔的字符串
								this.imageList = this.serviceInfo.image.split(',').filter(item => item.trim())
							}
						} else if (Array.isArray(this.serviceInfo.image)) {
							// 如果已经是数组，直接使用
							this.imageList = this.serviceInfo.image
						} else {
							// 其他情况，使用空数组
							this.imageList = []
						}
					} else {
						this.imageList = []
					}
				} else {
					uni.showToast({
						title: '获取服务信息失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('获取服务信息失败:', error)
				uni.showToast({
					title: '获取服务信息失败',
					icon: 'none'
				})
			}
		},
		
		// 加载技师信息
		async loadTechInfo() {
			try {
				const res = await uni.request({
					url: `${uni.$config.baseUrl}/technician/technician/${this.techId}`,
					method: 'GET'
				})
				
				if (res.statusCode === 200 && res.data.code === 200) {
					const data = res.data.data
					console.log(res)
					this.techInfo = {
						id: data.id,
						name: data.technicianName,
						avatar: data.avatar,
						title: data.title,
						score: data.score || 0,
						orders: data.appointmentCount || 0,
						storeId: data.storeId
					}
				} else {
					uni.showToast({
						title: '获取技师信息失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('获取技师信息失败:', error)
				uni.showToast({
					title: '获取技师信息失败',
					icon: 'none'
				})
			}
		},
		
		handleHomeService() {
			if (this.fromTechDetail) {
				console.info(111)
				// 如果是从技师详情页来的，直接跳转到技师详情页
				uni.navigateTo({
					url: `/pages/tech-detail/tech-detail?techId=${this.techInfo.id}&serviceId=${this.serviceInfo.id}&storeId=${this.storeId}&fromService=true&type=home&preSelectedServiceId=${this.serviceInfo.id}`
				})
			} else {
				// 如果是从服务列表来的，直接跳转到上门按摩页面
				console.log("serviceId",this.serviceInfo.id)
				console.log("preSelectedServiceId",this.serviceInfo.id)
				console.info(222)
				uni.navigateTo({
					url: `/pages/home-massage/home-massage?serviceId=${this.serviceInfo.id}&preSelectedServiceId=${this.serviceInfo.id}`
				})
			}
		},
		
		handleStoreService() {
			if (this.fromTechDetail) {
				// 如果是从技师详情页来的，检查参数并跳转到固定预约页面
				if (!this.techInfo.id || !this.serviceInfo.id || !this.techInfo.storeId) {
					console.log('Debug info:', {
						techId: this.techInfo.id,
						serviceId: this.serviceInfo.id,
						storeId: this.techInfo.storeId
					})
					uni.showToast({
						title: '缺少必要参数',
						icon: 'none'
					})
					return
				}
				
				uni.navigateTo({
					url: `/pages/store-booking-fixed/store-booking-fixed?techId=${this.techInfo.id}&serviceId=${this.serviceInfo.id}&storeId=${this.techInfo.storeId}&preSelectedServiceId=${this.serviceInfo.id}`
				})
			} else {
				// 如果是从服务列表来的，直接跳转到门店预约页面
				uni.navigateTo({
					url: `/pages/store-booking/store-booking?serviceId=${this.serviceInfo.id}&preSelectedServiceId=${this.serviceInfo.id}&priceCount=${this.serviceInfo.price}`
				})
			}
		}
	}
}
</script>

<style lang="scss">
.service-detail {
	min-height: 100vh;
	background: #F8F8F8;
	padding-bottom: 120rpx;
	
	.service-banner {
		width: 100%;
		height: 750rpx;
		position: relative;
		
		.banner-swiper {
			width: 100%;
			height: 100%;
		}
		
		.banner-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	
	.service-info {
		background: #FFFFFF;
		margin-top: -40rpx;
		padding: 0 30rpx 40rpx;
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
		
		.name {
			font-size: 40rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 24rpx;
			display: block;
			padding-top: 40rpx;
		}
		
		.features {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 24rpx;
			
			.feature-list {
				flex: 1;
				margin-right: 20rpx;
				
				.feature {
					font-size: 26rpx;
					color: #666;
					line-height: 1.6;
					display: block;
				}
			}
			
			.duration {
				display: flex;
				align-items: center;
				flex-shrink: 0;
				padding: 6rpx 16rpx;
				background: #F8F8F8;
				border-radius: 20rpx;
				
				.duration-icon {
					font-size: 28rpx;
					margin-right: 8rpx;
				}
				
				text {
					font-size: 26rpx;
					color: #666;
					white-space: nowrap;
				}
			}
		}
		
		.tags {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 24rpx;
			
			.tag {
				font-size: 24rpx;
				color: #666;
				background: #F8F8F8;
				padding: 6rpx 20rpx;
				border-radius: 20rpx;
				margin-right: 16rpx;
				margin-bottom: 12rpx;
			}
		}
	}
	
	.service-intro, .tech-info {
		background: #FFFFFF;
		margin-top: 20rpx;
		padding: 30rpx;
		
		.section-title {
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 20rpx;
		}
	}
	
	.service-intro {
		.brief {
			font-size: 28rpx;
			color: #333333;
			line-height: 2;
			text-align: justify;
			text-indent: 2em;
			letter-spacing: 1rpx;
		}
	}
	
	.tech-info {
		.tech-card {
			display: flex;
			align-items: center;
			
			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				margin-right: 24rpx;
			}
			
			.info {
				flex: 1;
				
				.name-row {
					margin-bottom: 12rpx;
					
					.name {
						font-size: 32rpx;
						color: #333;
						font-weight: 600;
						margin-right: 16rpx;
					}
					
					.title {
						font-size: 26rpx;
						color: #666;
					}
				}
				
				.rating {
					.score {
						font-size: 28rpx;
						color: #FF6B6B;
						margin-right: 16rpx;
					}
					
					.orders {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}
	}
	
	.booking-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		padding: 24rpx 32rpx;
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		background: #fff;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
		
		.btn {
			flex: 1;
			height: 88rpx;
			margin: 0 12rpx;
			border-radius: 44rpx;
			overflow: hidden;
			position: relative;
			
			&::after {
				content: '';
				position: absolute;
				top: -100%;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(
					90deg,
					rgba(255, 255, 255, 0) 0%,
					rgba(255, 255, 255, 0.3) 50%,
					rgba(255, 255, 255, 0) 100%
				);
				transform: rotate(45deg);
				animation: shine 3s infinite;
			}
			
			.btn-inner {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #fff;
			}
		}
		
		.home-service {
			background: linear-gradient(135deg, #2B87FF 0%, #1677FF 100%);
		}
		
		.store-service {
			background: linear-gradient(135deg, #40A9FF 0%, #2B87FF 100%);
		}
	}
}

@keyframes shine {
	0% {
		top: -100%;
		left: -100%;
	}
	20% {
		top: 100%;
		left: 100%;
	}
	100% {
		top: 100%;
		left: 100%;
	}
}
</style> 